<template>
    <Card>
        <p slot="title">技师列表</p>
        <div class="search-con search-con-top">
            技师信息：
                <Input placeholder="技师姓名、昵称、手机号" v-model="search.search" style="width: 160px;"></Input>
            <!-- 技师等级：
            <Select style="width:200px" v-model="search.level">
                <Option v-for="value in Lv" :value="value.id">{{ value.level_name }}</Option>
            </Select> -->
            工作状态：
            <Select style="width:110px" v-model="search.work_status">
                <Option :value="0">禁止</Option>
                <Option :value="1">休息</Option>
                <Option :value="2">上班</Option>
            </Select>
            <!-- <div style="padding-top: 20px;"></div> -->
            <!-- <span style="margin-left: 30px;">认证状态：</span>
            <Select style="width:200px" v-model="search.is_auth">
                <Option :value="0">未认证</Option>
                <Option :value="1">已认证</Option>
            </Select> -->
            申请时间：
            <DatePicker type="datetime" v-model="search.start_time" placeholder="开始时间" style="width: 180px"></DatePicker>
            <span style="margin: 0 3px;">-</span>
            <DatePicker type="datetime" v-model="search.end_time" placeholder="结束时间" style="width: 180px"></DatePicker>
            <Button type="primary" icon="ios-search" style="margin-left: 10px;" @click="getList">搜索</Button>
            <Button @click="reset" type="success" icon="ios-refresh" style="margin-left: 10px;">刷新</Button>
        </div>
        <Table :columns="columns" :data="list" ref="selection" border style="margin-top: 10px;">
            <template slot-scope="{ row , index}" slot="avatarSlot">
                <img :src="baseImgeUrl + row.avatar" style="width: 60px;height: 60px;" @click="showImg(baseImgeUrl + row.avatar)" />
            </template>
            <template slot-scope="{ row , index}" slot="auth">
                {{ row.is_auth === 1 ? '已认证' : '未认证' }}
            </template>
            <template slot-scope="{ row , index}" slot="moneySlot">
                <div>服务费：{{ row.service_money }}</div>
                <div>车费：{{ row.fare_money }}</div>
            </template>
            <!-- <template slot-scope="{ row , index}" slot="statusSlot">
                <i-switch size="large" @on-change="statusChange(row.id, row.status)">
                    <span slot="open">开启</span>
                    <span slot="close">关闭</span>
                </i-switch>
            </template> -->
            <template slot-scope="{ row , index}" slot="makeSlot">
                <Button type="success" size="small" @click="editUserLevel(row)">编辑</Button>
                <Button type="primary" size="small" style="margin-left: 10px;" @click="datum(row)">资料</Button>
                <Button type="error" size="small" @click="delTech(row.id)" style="margin-left: 10px;">删除</Button>
            </template>
        </Table>
        <br>

        <Page :total="total" show-sizer show-total show-elevator @on-change="changePage" @on-page-size-change="changeSize" :page-size-opts="pageSize">
        </Page>
        <Modal v-model="imgShow" width="330px" :closable="false">
            <img :src="imgShowUrl" style="width: 300px;">
        </Modal>
        <!-- 资料 -->
        <Modal width="1200" v-model="datumModal" title="资料">
            <Divider orientation="left">基础信息</Divider>
            <Row>
                <Col span="6">
                <p style="display: flex;align-items: center;">技师头像：<img  @click="showImg(baseImgeUrl+datumItem.avatar)" :src="baseImgeUrl+datumItem.avatar"
                        style="width: 50px;height: 50px;border-radius: 50%;"></p>
                </Col>
                <Col span="6" style="line-height: 50px;">身份证号：{{ datumItem.card_no }}</Col>
                <Col span="12" style="line-height: 50px;">服务项目：{{ datumItem.goods_str }}</Col>
            </Row>
            <Row>
                <Col span="6" style="line-height: 50px;">技师姓名：{{ datumItem.username }}</Col>
                <Col span="6" style="line-height: 50px;">技师等级：{{ datumItem.level_name}}</Col>
                <Col span="12" style="line-height: 50px;">服务日期：{{ datumItem.days }}</Col>
            </Row>
            <Row>
                <Col span="6" style="line-height: 50px;">手机号：{{ datumItem.mobile }}</Col>
                <Col span="6" style="line-height: 50px;">性别：{{ datumItem.gender }}</Col>
                <Col span="6" style="line-height: 50px;">注册时间：{{ datumItem.create_time }}</Col>
                <Col span="6" style="line-height: 50px;">余额：{{ datumItem.money }}</Col>
            </Row>
            <Row>
                <Col span="6" style="line-height: 50px;">信用：{{ datumItem.credit_score }}</Col>
                <Col span="6" style="line-height: 50px;">综合评分：{{ datumItem.score }}</Col>
            </Row>
            <Row>
                <Col span="6" style="line-height: 50px;">身高：{{ datumItem.height }}</Col>
                <Col span="6" style="line-height: 50px;">地区：{{ datumItem.address }}</Col>
                <Col span="6" style="line-height: 50px;">所属店铺：{{ datumItem.partner_name }}</Col>
                <Col span="6" style="line-height: 50px;">店铺地区：{{ datumItem.partner_address }}</Col>
            </Row>
            <Divider orientation="left">认证信息</Divider>
            <Row>
                <Col span="4">
                <p style="display: flex;align-items: center;">身份证正面：<img  @click="showImg(baseImgeUrl + datumItem.card_front_img)" :src="baseImgeUrl+datumItem.card_front_img" style="width: 100px;height: 100px;"></p>
                </Col>
                <Col span="4">
                <p style="display: flex;align-items: center;">身份证反面：<img @click="showImg(baseImgeUrl + datumItem.card_back_img)" :src="baseImgeUrl+datumItem.card_back_img" style="width: 100px;height: 100px;"></p>
                </Col>
                <Col span="4">
                <p style="display: flex;align-items: center;">健康证：<img @click="showImg(baseImgeUrl + datumItem.health_img)" :src="baseImgeUrl+datumItem.health_img" style="width: 100px;height: 100px;"></p>
                </Col>
                <Col span="4">
                <p style="display: flex;align-items: center;">资质认证：<img @click="showImg(baseImgeUrl + datumItem.certification_img)" :src="baseImgeUrl+datumItem.certification_img"  style="width: 100px;height: 100px;"></p>
                </Col>
                <Col span="4">
                <p style="display: flex;align-items: center;">营业执照：<img @click="showImg(baseImgeUrl + datumItem.business_img)" :src="baseImgeUrl+datumItem.business_img"  style="width: 100px;height: 100px;"></p>
                </Col>
            </Row>
            <Divider orientation="left">相册信息</Divider>
            <div style="display: flex;    flex-wrap: wrap;">
                <img @click="showImg(baseImgeUrl + value)" v-for="value in datumItem.image" :key="value" :src="baseImgeUrl+value"  style="margin: 10px 32px;width: 130px;height: 130px;">
            </div>
        </Modal>
        <!-- 编辑 -->
        <Modal v-model="editUserModal" title="编辑" @on-ok="editUserModalOk">
            <Form :model="formUserItem" :label-width="120">
                <!-- <FormItem label="技师昵称">
                    <Input v-model="formUserItem.nick" placeholder="请输入店铺名称"></Input>
                </FormItem> -->
                <FormItem label="技师姓名">
                    <Input v-model="formUserItem.username" placeholder="请输入技师姓名"></Input>
                </FormItem>
                <FormItem label="技师头像">
                    <Upload ref="upload" name="image" :headers="header" :action="action_url" :show-upload-list="false"
                        :format="['jpg', 'jpeg', 'png']" :on-format-error="handleFormatError" :on-success="handleSuccess">
                        <Button icon="ios-cloud-upload-outline">点击上传</Button>
                    </Upload>
                    <img :src="baseImgeUrl + formUserItem.avatar" style="width: 100px;height: 100px;"
                        v-show="formUserItem.avatar">
                </FormItem>
                <FormItem label="手机号">
                    <Input v-model="formUserItem.mobile" placeholder="请输入手机号"></Input>
                </FormItem>
                <FormItem label="登录密码">
                    <Input v-model="formUserItem.password" placeholder="请输入登陆密码"></Input>
                    <p>设置技师登录移动端的密码，留空表示不修改登录密码</p>
                </FormItem>
                <!-- <FormItem label="技师等级">
                    <Select v-model="formUserItem.level" style="width:200px">
                        <Option v-for="value in Lv" :value="value.id">{{ value.level_name }}</Option>
                    </Select>
                </FormItem> -->
                <FormItem label="服务单数">
                    <Input v-model="formUserItem.order_count" placeholder="请输入服务单数" type="number"></Input>
                </FormItem>
                <FormItem label="技师评分">
                    <Input v-model="formUserItem.score" placeholder="请输入技师评分" type="number"></Input>
                </FormItem>
                <FormItem label="工作状态">
                    <Select style="width:200px" v-model="formUserItem.work_status">
                        <Option :value="0">禁止</Option>
                        <Option :value="1">休息</Option>
                        <Option :value="2">上班</Option>
                    </Select>
                </FormItem>
                <FormItem label="性别">
                    <Radio-group v-model="formUserItem.gender">
                        <Radio label="未知" value="未知"></Radio>
                        <Radio label="男" value="男"></Radio>
                        <Radio label="女" value="女"></Radio>
                    </Radio-group>
                </FormItem>
                <FormItem label="技师标签">
                    <Radio-group v-model="formUserItem.targ">
                        <Radio label="0" value="0">无</Radio>
                        <Radio label="1" value="1">热门</Radio>
                        <Radio label="2" value="2">王牌</Radio>
                        <Radio label="3" value="3">新人</Radio>
                    </Radio-group>
                </FormItem>
                <FormItem label="技师排序">
                    <Input v-model="formUserItem.sort" placeholder="数字越大越靠前" type="number"></Input>
                </FormItem>
                <FormItem label="技师简介">
                    <Input v-model="formUserItem.intro" placeholder="请输入技师简介"></Input>
                </FormItem>
            </Form>
        </Modal>
    </Card>
</template>
  
<script>
import config from "@/config";
import { getToken } from "../../libs/util";
const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
const baseImgeUrl = process.env.NODE_ENV === "development" ? config.baseImgUrl.dev : config.baseImgUrl.pro;
export default {
    name: "technicianList",
    data() {
        return {
            pageSize:[10,30,50,80,100],
            baseUrl: baseUrl,
            baseImgeUrl: baseImgeUrl,
            action_url: baseUrl + "/admin/image/uploadImg",
            header: { Authorization: getToken() },
            // 列表
            columns: [
                {
                    title: 'ID',
                    align:"center",
                    key: 'id',
                },
                {
                    title: '头像',
                    align:"center",
                    key: 'avatar',
                    slot: "avatarSlot"
                },
                {
                    title: '姓名',
                    align:"center",
                    key: 'username',
                }, 
                {
                    title: '入驻类型',
                    align:"center",
                    key: 'type_title',
                },
                
                {
                    title: '性别',
                    align:"center",
                    key: 'gender',
                },
                {
                    title: '年龄',
                    align:"center",
                    key: 'age',
                },
                {
                    title: '手机号',
                    align:"center",
                    key: 'mobile',
                },
                // {
                //     title: '等级',
                //     align:"center",
                //     key: 'level',
                // },
                // {
                //     title: '状态',
                //     key: 'is_auth',
                //     slot: "auth"
                // },
                {
                    title: '余额',
                    align:"center",
                    key: 'money',
                    slot: "moneySlot"
                },
                {
                    title: '服务单数',
                    align:"center",
                    key: 'order_count',
                },
                // {
                //     title: '工作状态',
                //     key: 'work_status',
                //     slot: "statusSlot"
                // },
                {
                    title: '排序',
                    align:"center",
                    key: 'sort',
                },
                {
                    title: '好评',
                    align:"center",
                    key: 'score',
                },
                {
                    title: '信用',
                    align:"center",
                    key: 'credit_score',
                },
                {
                    title: '操作',
                    align:"center",
                    slot: 'makeSlot',
                    width: 210
                },
            ],
            // 数据
            list: [],
            total: 0,
            imgShow: false,
            imgShowUrl: '',
            editUserModal: false,
            formUserItem: {},
            datumModal: false,
            datumItem: {},
            Lv: [],
            search: {
                search: "",
                level: "",
                work_status: "",
                is_auth: "",
                start_time: "",
                end_time: "",
                page: 1,
                limit: 10
            },
        }
    },
    methods: {
        // 查询技师信息
        getList() {
            this.$axios('/admin/tec/getList', this.search).then(res => {
                this.list = res.data;
                this.total = res.total;
            });
        },
        searchs() {
            this.search.page = 1;
            this.getList();
        },
        reset() {
            this.search.search = ""
            this.search.level = ""
            this.search.work_status = ""
            this.search.start_time = ""
            this.search.end_time = ""
            this.search.is_auth = ""
            this.getList();
        },
        changePage(page) {
            this.search.page = page;
            this.getList();
        },
        changeSize(size) {
            this.search.limit = size;
            this.getList();
        },
        showImg(url) {
            this.imgShow = true;
            this.imgShowUrl = url;
        },
        statusChange(id, status) {
            this.$axios('/admin/tec/status', { id: id, status: status }).then(res => {
                this.$Message.success('设置成功');
                this.getList();
            });
        },
        editUserLevel(row) {
            this.formUserItem = row;
            this.editUserModal = true;
        },
        datum(row) {
            this.$axios('/admin/tec/info  ', { id: row.id }).then(res => {
                this.datumItem = res;
                this.datumModal = true;
            });
        },
        editUserModalOk() {
            this.$axios('/admin/tec/edit', this.formUserItem).then(res => {
                this.$Message.success('设置成功');
                this.getList();
            });
        },
        handleFormatError(file) {
            this.$Notice.warning({
                title: "文件格式错误",
                desc: "不支持该文件类型",
            });
        },
        handleSuccess(res, file) {
            this.formUserItem.avatar = res.data.src;
        },
        // 查看图片
        showImg(url) {
            this.imgShow = true;
            this.imgShowUrl = url;
        },
        // 获取技师等级
        lv_list() {
            this.$axios('/admin/tec/getLevelArr').then(res => {
                this.Lv = res;
            });
        },
        delTech(id){
            this.$Modal.confirm({
                title: '删除技师',
                content: "<p>您确定要删除该技师吗？</p>",
                onOk: () => {
                    this.$axios('/admin/tec/delTech', { id: id }).then(res => {
                        this.$Message.success('删除成功');
                        this.getList();
                    });
                },
                onCancel: () => {
                    this.$Message.info('取消操作');
                }
            });
        },
    },
    mounted() {
        this.lv_list()
        this.uploadList = this.$refs.upload.fileList;
    },
    created() {
        this.getList();
    }
}
</script>
<style>
.ivu-table-cell {
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
  